<template>
  <div class="table-view">
    <div class="flex justify-end add-btn">
      <el-button v-if="!disabled" type="primary" :disabled="disabled" @click="addProduct"
        >选择切换SKU</el-button
      >
      <slot name="handle"></slot>
    </div>
    <vxe-table
      border
      show-overflow
      :data="listData"
      height="500"
      :row-config="{ height: 60 }"
      :row-class-name="rowClassName"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="sku" title="切换SKU">
        <template #header="{ row }">
          <div class="flex items-center">
            切换SKU
            <el-tooltip content="Top center" placement="top">
              <template #content><div v-html="SWITCH_SKU_DESCRIPTION"></div></template>
              <svg-icon icon-class="QuestionFilled"></svg-icon>
            </el-tooltip>
          </div>
        </template>

        <template #default="{ row }"> {{ row.alternative_sku }}</template>
      </vxe-column>
      <vxe-column field="remark" title="备注">
        <template #default="{ row }">
          <div v-if="disabled">{{ row.remark }}</div>
          <el-input v-else v-model="row.remark" placeholder="备注"></el-input>
        </template>
      </vxe-column>

      <vxe-column title="创建人">
        <template #default="{ row }">
          <div>{{ row.created_user_text }}</div>
          <div>{{ row.created_at }}</div>
        </template>
      </vxe-column>
      <vxe-column title="更新人">
        <template #default="{ row }">
          <div>{{ row.updated_user_text }}</div>
          <div>{{ row.updated_at }}</div>
        </template>
      </vxe-column>
      <vxe-column title="操作" fixed="right" v-if="!disabled" width="80">
        <template #default="{ row, rowIndex }">
          <el-button text type="danger" @click="handleDel(row, rowIndex)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
  <skuList
    :current_sku="current_sku"
    ref="skuListRef"
    @selected="selectedSKU"
    :checked="listData"
  >
  </skuList>
</template>

<script setup lang="jsx" name="SwitchSKU">
import skuList from "./skuList.vue";
import { SWITCH_SKU_DESCRIPTION } from "@/utils/product/data.js";
let handleType = reactive(inject("handleType"));

import { reactive } from "vue";
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  current_sku: {
    type: String,
    default: "",
  },
});

const { current_sku } = toRefs(props);

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/combination-SKU"))
  );
});

const listData = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const handleDel = (row, index) => {
  if (row.id) {
    listData.value[index].delete = 1;
  } else {
    listData.value.splice(index, 1);
  }
};

const skuListRef = ref();
const addProduct = () => {
  nextTick(() => {
    skuListRef.value.open(1);
  });
};

const selectedSKU = (array) => {
  const newArray = array.map((i) => {
    return {
      alternative_sku: i.sku,
      alternative_sku_id: i.id,
      remark: i.remark,
    };
  });

  listData.value.push(...newArray);
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
</script>

<style lang="scss" scoped>
.table-view {
  padding: 0;
  border: none;
  padding-top: -44px;
  margin-top: -34px;
  :deep(.add-btn) {
    margin-bottom: 6px;
  }
  :deep(.vxe-grid--toolbar-wrapper) {
    display: none;
  }
  :deep(.vx-table__content) {
    padding: 0;
  }
}
</style>
